<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户统计</title>
  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/user_statistics.css">
  <script src="../lib/jquery-1.11.3.js"></script>
  <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>  
  <link rel="stylesheet" href="../css/index.css"> 
  <link rel="stylesheet" href="../font/iconfont.css">
  <script src="../JavaScript/utils.js"></script>
  
  
  
 
</head>
<body>
  <div class="kong11"></div>
  <div id="mulu">
    <!-- 导航 -->
    <div id="cateHead">
      <p><span>首页 / 数据统计 / </span>用户统计</p>
      <p>用户统计</p>
  </div>
</div>
    
<div class=" bj ">       
         
      <div class="clear da">               
        <div class="tjList">
          <p class="tjTitle">黄金会员</p>
          <p class="tjNum" id="hjhy"></p>
          <p>
            <img src="../images/statistical-img/u22648.svg" alt="">
            <img src="../images/statistical-img/u22648.svg" alt="">
            <img src="../images/statistical-img/u22648.svg" alt="">
            <img src="../images/statistical-img/u22648.svg" alt="">
            <img src="../images/statistical-img/u22648.svg" alt="">              
          </p>
          <p class="tjzb" id="hjzb"></p>
        </div>
        <div class="tjList">
          <p class="tjTitle">钻石会员</p>
          <p class="tjNum" id="zshy"></p>
          <p>
            <img src="../images/statistical-img/u22659.svg" alt="">
            <img src="../images/statistical-img/u22659.svg" alt="">
            <img src="../images/statistical-img/u22659.svg" alt="">
            <img src="../images/statistical-img/u22659.svg" alt="">
            <img src="../images/statistical-img/u22659.svg" alt="">
          </p>
          <p class="tjzb" id="zszb"></p>
        </div>
        <div class="tjList">
          <p class="tjTitle">日活用户</p>
          <p class="tjNum">4,560</p>
          <p class="tjimg">
            <img class="pic" src="../images/statistical-img/u22665.png" alt="">
          </p>
          <p class="tjzb">
            <span>占比</span>
            <span>45%</span>
            <span>日环比</span>
            <span><img src="../images/statistical-img/u305.svg" alt=""></span>
            <span>11%</span>
          </p>
        </div>
        <div class="tjList">
          <p class="tjTitle">月活用户</p>
          <p class="tjNum">6,678</p>
          <p>
            <img  class="pic" src="../images/statistical-img/u22669.svg" alt="">
          </p>
          <p class="tjzb">
            <span>占比</span>
            <span>60%</span>
            <span>周同比</span>
            <span><img src="../images/statistical-img/u303.svg" alt=""></span>
            <span>12%</span>
          </p>
        </div> 
      </div>
      <div class="distb">
          <p>各地区分布</p>
          <table class="table">
            <thead>
                <tr>
                    <th>地区</th>
                    <th>用户数</th>
                    <th>地区</th>
                    <th>用户数</th>
                    <th>地区</th>
                    <th>用户数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>北京</td>
                    <td>2222</td>
                    <td>上海</td>
                    <td>2222</td>
                    <td>天津</td>
                    <td>2222</td>
                </tr>
                <tr>
                    <td>河北</td>
                    <td>1111</td>
                    <td>山西</td>
                    <td>2222</td>
                    <td>辽宁</td>
                    <td>3333</td>
                </tr>
                <tr>
                    <td>吉林</td>
                    <td>2222</td>
                    <td>黑龙江</td>
                    <td>2222</td>
                    <td>江苏</td>
                    <td>2222</td>
                </tr>
                
                
            </tbody>
        </table>
      </div>
      <div class="distb clear">
          <p id="onlineUser">各时间段在线用户</p>
          <div id="xuanxiangka">
            <div>
            <div onclick="dianji(this,1)">昨天</div><div onclick="dianji(this,2)">最近7天</div><div onclick="dianji(this,3)">最近30天</div>
            </div>
            <input type="text" value="2019-07-01至2019-07-07 " >
          </div>
          <!-- 昨天 -->
          <div class="clear xxk_content">
            <img src="../images/statistical-img/折线.png" alt="">
            <div  id="you">
            <p>4560</p>
            <p>昨日活跃用户数</p>
            <p><img src="../images/statistical-img/u22776.svg" alt=""></p>
            <p>16:00-17:00</p>
            <p>20:00-21:00</p>
            <p>用户最佳活跃时间段</p>
            </div>
          </div>
          <!-- 昨天 -->

          <!-- 最近7天 -->
          <div class="clear xxk_content">
            <img src="../images/statistical-img/折线.png" alt="">
            <div  id="you">
            <p>1000</p>
            <p>近七天活跃用户数</p>
            <p><img src="../images/statistical-img/u22776.svg" alt=""></p>
            <p>16:00-17:00</p>
            <p>20:00-21:00</p>
            <p>用户最佳活跃时间段</p>
            </div>
          </div>
          <!-- 最近7天 -->

          <!-- 最近30天 -->
          <div class="clear xxk_content">
            <img src="../images/statistical-img/折线.png" alt="">
            <div  id="you">
            <p>10000</p>
            <p>近30天活跃用户数</p>
            <p><img src="../images/statistical-img/u22776.svg" alt=""></p>
            <p>16:00-17:00</p>
            <p>20:00-21:00</p>
            <p>用户最佳活跃时间段</p>
            </div>
          </div>
          <!-- 最近30天 -->
      </div>

      <div id="tj_sex" class="clear">
        <p>性别比例</p>
        <div id="sex_zuo"></div>
        <div id="sex_you"></div>
        
        <div id="nv">
          <div></div>
          <span id="nvzb"></span>
        </div>
        <div id="nan">
          <div ></div>
          <span id="nanzb"></span>
        </div>
    </div>

      <div id="tj_age" class="clear">
        <p>年龄分布</p>
        <div>
          <div>
            <span>20</span><img src="../images/statistical-img/u22935.svg" alt="">
          </div>
          <div>
            <span>15</span><img src="../images/statistical-img/u22935.svg" alt="">
          </div>
          <div>
            <span>10</span><img src="../images/statistical-img/u22935.svg" alt="">
          </div>
          <div>
            <span>5</span><img src="../images/statistical-img/u22935.svg" alt="">
          </div>
          <div id="dingwei">
            <span>0</span><img src="../images/statistical-img/u22939.svg" alt="">
            <div class="histogram clear">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              
            </div>
          </div>
          
        </div>
        <div>
          <span>年龄段</span><span>用户占比</span><br><br>          
          <span>0-18岁</span><span id="18"></span><br><br>
          <span>19-24岁</span><span id="24"></span></span><br><br>
          <span>25-30岁</span><span id="30"></span></span><br><br>
          <span>31-40岁</span><span id="40"></span></span><br><br>
          <span>41-50岁</span><span id="50"></span></span><br><br>
          <span>50岁以上</span><span id="50up"></span></span>
          
        </div>

        <div id="age_b" class="clear">
          
          <div>0-18岁</div>
          <div>19-24岁</div>
          <div>25-30岁</div>
          <div>31-40岁</div>
          <div>41-50岁</div>
          <div>50岁以上</div>

        </div>
        
        
    </div>

</div>  

<div>
      <span class="foot1">大健康综合管理后台</span>
      <span class="foot2">版权所有:@大健康综合(集团)有限公司Meinian Onehealth Healthcare (Group)Co.</span>
      <span class="foot2">沪ICP备09017846号-3沪公网安备31010602006448号</span>
</div>
     <script src="../JavaScript/index.js"></script>
    <script src="../JavaScript/data.js"></script>
   
    <script>
      
      let usern=getset(userData,'userdata')
      
      function num(val,data){//数据的属性的值，数据的来源
        let sum=0
        data.forEach(item => {
          for (var i in item) {
            if(item[i]==val)
            sum++
        }
        })
        return sum        
      }    
      function dianji(obj,num){        
        $(obj).parent().parent().nextAll().css({
          display:'none'
        })
        
        $(obj).siblings().css({
          backgroundColor: 'white',
          color: '#1890FF'
        })
        $(obj).css({
          backgroundColor: '#1890FF',
          color: 'white'
        })
        $(obj).parent().parent().siblings().eq(num).css({
          display:'block'
        })     
      }
     
      function ageNum(s1,s2, data){//年龄1，年龄2，数据源
      let sum=0
        for(let i=0;i<data.length;i++){
          if(data[i].age<=s2&&data[i].age>=s1){
            sum++
          }
        }
        return sum    
     }
       
      $('#hjhy').append(num('黄金会员',usern))
      $('#hjzb').append('占比'+Math.round(num('黄金会员',usern)/usern.length*100)+'%')
      $('#zshy').append(num('钻石会员',usern))
      $('#zszb').append('占比'+Math.round(num('钻石会员',usern)/usern.length*100)+'%')
      $('#nvzb').append('女（'+Math.round(num('女',usern)/usern.length*100)+'%）')
      $('#nanzb').append('男（'+parseInt(num('男',usern)/usern.length*100)+'%）')
      let nvbl=num('女',usern)/usern.length*94+'%'
      let nanbl=num('男',usern)/usern.length*94+'%'   
      $('#sex_zuo').css({
        width:nvbl
      })
      console.log(nvbl)
      $('#sex_you').css({
        width:nanbl
      })
      
      $('#18').append(parseInt(ageNum(0,18, usern)/usern.length*100)+'%')
      $('#24').append(parseInt(ageNum(19,24, usern)/usern.length*100)+'%')
      $('#30').append(parseInt(ageNum(25,30, usern)/usern.length*100)+'%')
      $('#40').append(parseInt(ageNum(31,40, usern)/usern.length*100)+'%')
      $('#50').append(parseInt(ageNum(41,50, usern)/usern.length*100)+'%')
      $('#50up').append(parseInt(ageNum(51,9999, usern)/usern.length*100)+'%')

      let a1=ageNum(0,18, usern)*12+'px'
      let a2=ageNum(19,24, usern)*12+'px'
      let a3=ageNum(25,30, usern)*12+'px'
      let a4=ageNum(31,40, usern)*12+'px'
      let a5=ageNum(41,50, usern)*12+'px'
      let a6=ageNum(51,999, usern)*12+'px'
      let a1_1=-(ageNum(0,18, usern)-1)*12+'px'
      let a2_1=-(ageNum(19,24, usern)-1)*12+'px'
      let a3_1=-(ageNum(25,30, usern)-1)*12+'px'
      let a4_1=-(ageNum(31,40, usern)-1)*12+'px'
      let a5_1=-(ageNum(41,50, usern)-1)*12+'px'
      let a6_1=-(ageNum(51,999, usern)-1)*12+'px'
     
      $('.histogram').children().eq(0).css({
        height:a1,
        marginTop:a1_1
      })
      $('.histogram').children().eq(1).css({
        height:a2,
        marginTop:a2_1})
      $('.histogram').children().eq(2).css({
        height:a3,
        marginTop:a3_1
      })
      $('.histogram').children().eq(3).css({
        height:a4,
        marginTop:a4_1
      })
      $('.histogram').children().eq(4).css({
        height:a5,
        marginTop:a5_1
      })
      $('.histogram').children().eq(5).css({
        height:a6,
        marginTop:a6_1
      })

    </script>

</body>
</html>